<template>
  <div class="dailyanalytics-list">
    <div class="search-box">
      <Row type="flex">
        <Row type="flex" justify="start" class="search-item-left">
          <Col class="search-item">
          <ButtonGroup>
            <Button :type="dailyButtonType?'primary':'default'" class="search-group-btn" @click="dailyOperationAnalysis">日运营分析</Button>
            <Button :type="turnoverButtonType?'primary':'default'" class="search-group-btn" @click="turnoverDetails">营业额明细</Button>
          </ButtonGroup>
          </Col>
          <Col class="search-item mode-btn" v-show="dailyButtonType">
          <button type="default" class="ivu-btn ivu-btn-default" @click="modeSwitch">
            <i class="iconsys icondepartment"></i>{{modeShow?"图形模式":"数据模式"}}</button>
          </Col>
        </Row>
        <Row type="flex" justify="end" class="search-item-right">
          <Col class="search-item">
          <span class="search-label">日期:</span>
          <DatePicker type="date" placement="top" :value="defaultTime" placeholder="请选择"  @on-change="selectTime" :options="optionsStartTimeDay" :editable="false" style="width: 200px"></DatePicker>
          </Col>
          <Col class="search-item">
          <span class="search-label">门店名称:</span>
          <Select v-model="shopIds" filterable class="select-shop-item" @on-change="doSearch" >
            <Option v-for="item in shopListData" :value="item.shopId" :key="item.shopId">{{ item.shopName }}</Option>
          </Select>
          </Col>
          <Col class="search-item">
          <Button class="search-btn" type="primary" @click="doSearch">查询</Button>
          </Col>
        </Row>
      </Row>
    </div>
    <div v-show="contentShow">
      <!-- 图形模式 -->
      <div id="graphicsMode" v-show="!modeShow && dailyButtonType">
        <P class="dailyanalytics-title dailyanalytics-title-bg">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">收款统计</span>
        </P>
        <div class="collecting-statistics">
          <div class="collecting-statistics-li">
            <p class="collecting-statistics-name">营收小计</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.bizAmount}}</p>
          </div>
          <div class="collecting-statistics-li">
            <p class="collecting-statistics-name">营业外小计</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.nonBizAmount}}</p>
          </div>
          <div class="collecting-statistics-li">
            <p class="collecting-statistics-name">今日另收</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.additionAmount}}</p>
          </div>
          <div class="collecting-statistics-li">
            <p class="collecting-statistics-name">团购兑换</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.groupByingAmount}}</p>
          </div>
          <div class="collecting-statistics-li">
            <p class="collecting-statistics-name">银票卡销售额</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.bankcardAmount}}</p>
          </div>
          <div class="collecting-statistics-li" style="cursor: pointer;">
            <p class="collecting-statistics-name">收款合计</p>

            <p class="collecting-statistics-num">{{!statRevenueVOShow?0:statRevenueVO.totalAmount}}</p>
          </div>

        </div>
        <P class="dailyanalytics-title dailyanalytics-title-bg">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">收款方式&营收统计</span>
        </P>

        <div class="dailyanalytics-chart">
          <div class="dailyanalytics-chart-div">
            <div id="paymentTerm" class="chart-pie">
            </div>
            <div class="dailyanalytics-chart-legend">
              <div class="legend-li" v-for="(item,index) in paymentApproachList" :key="index">
                <span class="legend-icon" :style="{'background-color':item.color}"></span>
                <span class="legend-title">{{item.payCode}}</span>
                <span class="legend-total">{{item.value}}</span>
                <span class="legend-percentage" v-if="item.payCode!=='合计'">{{item.percent}}%</span>
              </div>
            </div>
          </div>
          <div class="dailyanalytics-chart-div">
            <div id="salesChannels" class="chart-pie">
            </div>
            <div class="dailyanalytics-chart-legend">
              <div class="legend-li" v-for="(item,index) in revenueChannelList" :key="index">
                <span class="legend-icon" :style="{'background-color':item.color}"></span>
                <span class="legend-title">{{item.channelName}}</span>
                <span class="legend-total">{{item.value}}</span>
                <span class="legend-percentage" v-if="item.channelName!=='合计'">{{item.percent}}%</span>
              </div>
            </div>
          </div>
          <P class="dailyanalytics-title dailyanalytics-title-bg">
            <span class="chart-title-icon"></span>
            <span class="chart-title-name">售增明细&币值统计</span>
          </P>

          <div class="dailyanalytics-chart">
            <div class="dailyanalytics-chart-li">
              <div id="currencyProportion" class="chart-pie1">
              </div>
              <div class="chart-legend-detail">
                <div class="dailyanalytics-chart-legend-li">
                  <div class="legend-li" v-for="(item,index) in currencyDataList" :key="index">
                    <span class="legend-icon" :style="{'background-color':item.color}"></span>
                    <span class="legend-title">{{item.name}}</span>
                    <span class="legend-total">{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="dailyanalytics-chart-li">
              <div id="currencyAggregate" class="chart-pie1">
              </div>
              <div class="chart-legend-detail">
                <div class="legend-chart-li">
                  <div class="legend-li" v-for="(item,index) in coinDetailListTotal" :key="index">
                    <span class="legend-icon" :style="{'background-color':item.color}"></span>
                    <span class="legend-title">{{item.name}}</span>
                    <span class="legend-total">{{item.value}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="dailyanalytics-chart-li" v-show="statRevenueVOShow">
              <div id="revenue" class="chart-pie1"></div>
              <div class="legend-chart-li">
                <div class="legend-li">
                  <span class="legend-icon" style="background-color:#2D8CF0"></span>
                  <span class="legend-title">游戏币营收（元）</span>
                  <span class="legend-total">{{statRevenueVO.coinAmount}}</span>
                </div>
                <div class="legend-li">
                  <span class="legend-icon" style="background-color:#FF9901"></span>
                  <span class="legend-title">售增币合计(枚)</span>
                  <span class="legend-total">{{statRevenueVO.giftAmount}}</span>
                </div>
                <div class="legend-li">
                  <span class="legend-icon" style="background-color:##ED4014"></span>
                  <span class="legend-title">日单位币值(元)</span>
                  <span class="legend-total">{{statRevenueVO.unitCoinAmount}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 日运营分析 -->
      <div id="dailyOperationAnalysis" v-show="modeShow && dailyButtonType">
        <P class="dailyanalytics-title">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">收款统计</span>
        </P>
        <template>
          <Table :columns="columns1" :data="data1"></Table>
        </template>
        <P class="dailyanalytics-title">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">收款方式</span>
        </P>
        <template>
          <Table :columns="columns2" :data="paymentApproachList">
            <template slot-scope="{ row }" slot="percent">
              <span>{{row.payCode!=="合计" && row.percent!==null?row.percent+"%":""}}</span>
            </template>
          </Table>
        </template>
        <P class="dailyanalytics-title">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">营收统计</span>
        </P>
        <template>
          <Table :columns="columns3" :data="revenueChannelList">
            <template slot-scope="{ row }" slot="percent">
              <span>{{row.channelName!=="合计" && row.percent!==null?row.percent+"%":""}}</span>
            </template>
          </Table>
        </template>
        <P class="dailyanalytics-title">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">币值统计</span>
        </P>
        <template>
          <Table :columns="columns4" :data="data1">
            <template slot-scope="{ row }" slot="unitCoinAmount">
              <span>{{row.unitCoinAmount!==null?row.unitCoinAmount+"%":""}}</span>
            </template>
          </Table>
        </template>
        <P class="dailyanalytics-title">
          <span class="chart-title-icon"></span>
          <span class="chart-title-name">售增明细</span>
        </P>
        <template>
          <Table :columns="columns5" :data="coinDetailList"></Table>
        </template>
      </div>
      <!-- 营业额明细 -->
      <div id="turnoverDetails" v-if="turnoverButtonType">
        <template>
          <tree-table :data="resource" :total="total"></tree-table>
        </template>
      </div>
    </div>
     <div v-show="!contentShow" style="text-align: center;margin-top:114px;">
      <img :width="320" :height="240" :src="error">
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import TreeTable from '_c/tree-table'
import { getShopList } from '@/api/system/store'
import { itemDaily, businessShopDaily } from '@/api/report/finance'
import { formatDate } from '@/libs/tools'
import error from '@/assets/images/error-page/error.svg'
export default {
  components: { TreeTable },
  name: 'report_finance_dailyanalytics',
  data () {
    return {
      contentShow: false, // 是否显示内容
      dailyButtonType: true, // 日运营分析按钮
      turnoverButtonType: false, // 营业额明细
      modeShow: false, // 切换图形模式或数据模式
      list: [], // 请求原始数据
      treeDataSource: [], // 组合成树表格接收的数据
      shopName: '',
      shopListData: [], // 门店列表
      shopIds: '', // 门店ID
      coinDetailList: [], // 售赠明细
      coinDetailListTotal: [], // 币总计
      revenueChannelList: [], // 营收渠道
      paymentApproachList: [], // 支付方式
      statRevenueVO: [], // 收入统计
      coinData: [], // 币合计
      currencyDataList: [], // 币占比
      error: error,
      statRevenueVOShow: false,
      defaultTime: formatDate(
        new Date(new Date().getTime() - 86400000 * 1),
        'yyyy-MM-dd'
      ),
      optionsStartTimeDay: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now() - 86400000
        }
      },
      columns1: [
        { title: '营收小计', key: 'bizAmount', align: 'center' },
        { title: '营业外小计', key: 'nonBizAmount', align: 'center' },
        { title: '今日另收', key: 'additionAmount', align: 'center' },
        { title: '团购兑换', key: 'groupByingAmount', align: 'center' },
        { title: '银票卡销售额', key: 'bankcardAmount', align: 'center' },
        { title: '收款合计', key: 'totalAmount', align: 'center' }
      ], // 收款统计
      data1: [], // 收款统计
      columns2: [
        { title: '分项', key: 'payCode', align: 'center' },
        { title: '金额', key: 'revenue', align: 'center' },
        { title: '占比', slot: 'percent', align: 'center' }
      ], // 收款方式
      columns3: [
        { title: '分项', key: 'channelName', align: 'center' },
        { title: '金额', key: 'revenue', align: 'center' },
        { title: '占比', slot: 'percent', align: 'center' }
      ], // 营收统计
      columns4: [
        { title: '游戏币营收', key: 'coinAmount', align: 'center' },
        { title: '售赠币合计', key: 'giftAmount', align: 'center' },
        { title: '日单位币值', slot: 'unitCoinAmount', align: 'center' }
      ], // 币值统计
      columns5: [
        { title: '名称', key: 'saleType', align: 'center' },
        { title: '实体币', key: 'entityCoinNo', align: 'center' },
        { title: '电子币', key: 'electronicsCoinNo', align: 'center' },
        { title: '小计', key: 'subtotal', align: 'center' }
      ], // 售增明细
      total: 0,
      resource: []
    }
  },
  methods: {
    // 模式切换
    modeSwitch () {
      if (this.dailyButtonType) {
        this.modeShow = !this.modeShow
      }
    },
    // 切换时间
    selectTime (e) {
      this.defaultTime = e
      this.doSearch()
      // this.searchObj.creationTimeBegin = e[0]
      // this.searchObj.creationTimeEnd = e[1]
      // this.getOrderPage()
    },
    // 日运营分析
    dailyOperationAnalysis () {
      this.dailyButtonType = true // 日运营分析按钮
      this.turnoverButtonType = false // 营业额明细
      this.doSearch() // 营业项明细
    },
    // 营业额明细
    turnoverDetails () {
      this.dailyButtonType = false // 日运营分析按钮
      this.turnoverButtonType = true // 营业额明细
      this.doSearch() // 营业项明细
    },
    // 收款方式
    getPaymentTerm () {
      let paymentApproachListData = []
      let paymentApproachListDataColor = []
      for (let index = 0; index < this.paymentApproachList.length; index++) {
        const element = this.paymentApproachList[index]
        if (element.payCode !== '合计') {
          paymentApproachListData.push(element)
          paymentApproachListDataColor.push(element.color)
        }
      }
      if (paymentApproachListData.length > 0) {
        let myChart = echarts.init(document.getElementById('paymentTerm')) // 收款方式
        let option = {
          title: {
            text: '收款方式',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#808695',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}：{d}%'
          },
          color: paymentApproachListDataColor,
          series: [
            {
              name: '收款方式',
              type: 'pie',
              radius: ['30%', '55%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: paymentApproachListData
            }
          ]
        }
        myChart.setOption(option) // 收款方式
        window.addEventListener('resize', function () {
          myChart.resize() // 收款方式
        })
      }
    },
    // 营收渠道
    getSalesChannels () {
      let revenueChannelListData = []
      let revenueChannelListDataColor = []
      for (let index = 0; index < this.revenueChannelList.length; index++) {
        const element = this.revenueChannelList[index]
        if (element.channelName !== '合计') {
          revenueChannelListData.push(element)
          revenueChannelListDataColor.push(element.color)
        }
      }
      if (revenueChannelListData.length > 0) {
        let myChart1 = echarts.init(document.getElementById('salesChannels')) // 营收渠道
        let salesChannelsOption = {
          title: {
            text: '营收渠道',
            x: 'center',
            y: 'center',
            itemGap: 20,
            textStyle: {
              color: '#808695',
              fontFamily: '微软雅黑',
              fontSize: 12
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: '{b}：{d}%'
          },
          color: revenueChannelListDataColor,
          series: [
            {
              name: '收款方式',
              type: 'pie',
              radius: ['30%', '55%'],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: revenueChannelListData
            }
          ]
        }
        myChart1.setOption(salesChannelsOption) // 营收渠道
        window.addEventListener('resize', function () {
          myChart1.resize() // 营收渠道
        })
      }
    },
    // 币占比
    getCurrencyProportion () {
      let currencyData = []
      let currencyDataListColor = []
      for (let index = 0; index < this.currencyDataList.length; index++) {
        const element = this.currencyDataList[index]
        if (element.name !== '电子币合计' && element.name !== '实体币合计') {
          currencyData.push(element)
          currencyDataListColor.push(element.color)
        }
      }
      let myChart2 = echarts.init(
        document.getElementById('currencyProportion')
      ) // 币占比
      let optionCurrencyProportion = {
        title: {
          text: '币占比',
          x: 'center',
          y: 'center',
          itemGap: 20,
          textStyle: {
            color: '#808695',
            fontFamily: '微软雅黑',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{d}%'
        },
        color: currencyDataListColor,
        series: [
          {
            name: '收款方式',
            type: 'pie',
            radius: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: currencyData
          }
        ]
      } // 币占比
      myChart2.setOption(optionCurrencyProportion) // 币占比
      window.addEventListener('resize', function () {
        myChart2.resize() // 币占比
      })
    },
    // 币总计
    getCurrencyAggregate () {
      let coinDetailListTotalData = []
      let coinDetailListColor = []
      for (let index = 0; index < this.coinDetailListTotal.length; index++) {
        const element = this.coinDetailListTotal[index]
        if (element.name !== '总合计') {
          coinDetailListTotalData.push(element)
          coinDetailListColor.push(element.color)
        }
      }
      let myChart3 = echarts.init(document.getElementById('currencyAggregate')) // 币总计
      let optionCurrencyTotal = {
        title: {
          text: '币总计',
          x: 'center',
          y: 'center',
          itemGap: 20,
          textStyle: {
            color: '#808695',
            fontFamily: '微软雅黑',
            fontSize: 12
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}：{d}%'
        },
        color: coinDetailListColor,
        series: [
          {
            name: '收款方式',
            type: 'pie',
            radius: ['30%', '55%'],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: true
              }
            },
            data: coinDetailListTotalData
          }
        ]
      } // 币总计
      myChart3.setOption(optionCurrencyTotal) // 币总计
      window.addEventListener('resize', function () {
        myChart3.resize() // 币总计
      })
    },
    // 售增明细
    getRevenueChart () {
      let coinAmount = [] // 日单位币值
      coinAmount.push(this.statRevenueVO.coinAmount) // 日单位币值
      let giftAmount = [] // 售赠币合计
      giftAmount.push(this.statRevenueVO.giftAmount) // 售赠币合计
      let myChart = echarts.init(document.getElementById('revenue')) // 售增明细
      let optionRevenue = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          show: false,
          data: ['游戏币营收(元)', '售增币合计(枚)', '日单位币值(元)']
        },
        calculable: true,
        color: ['#2D8CF0', '#FF9901', '#C42DF0'],
        xAxis: [
          {
            type: 'category'
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '游戏币营收(元)',
            type: 'bar',
            data: coinAmount
          },
          {
            name: '售增币合计(枚)',
            type: 'bar',
            data: giftAmount
          }
        ]
      } // 售增明细
      myChart.setOption(optionRevenue) // 售增明细
      window.addEventListener('resize', function () {
        myChart.resize() // 售增明细
      })
    },
    // 查询门店名称
    getShopList () {
      getShopList({
        merchantId: this.$store.state.user.merchantId, // 商户id
        permissionCode: 'moms:report:dailyanalytics',
        offset: 0,
        limit: 9999
      })
        .then(res => {
          if (res.data.status === 200) {
            if (res.data.totalCount > 0) {
              this.shopListData = res.data.data
            } else {
            }
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${this.showError(error)}`)
        })
    },
    // 店面日营运分析统计查询
    getBusinessShopDaily () {
      let shopId = []
      shopId.push(this.shopIds)
      businessShopDaily({
        merchantId: this.$store.state.user.merchantId, // 商户id
        shopIds: shopId,
        startDate: this.defaultTime ? this.defaultTime + ' 00:00:00' : '',
        endDate: this.defaultTime
          ? formatDate(
            new Date(
              new Date(this.defaultTime + ' 00:00:00').getTime() +
                  86400000 * 1
            ),
            'yyyy-MM-dd hh:mm:ss'
          )
          : ''
      })
        .then(res => {
          if (res.data.status === 200) {
            if (
              res.data.data.statRevenueVO !== null &&
              res.data.data.statRevenueVO !== ''
            ) {
              // 收入统计
              this.statRevenueVO = res.data.data.statRevenueVO
              this.statRevenueVOShow = true
              let statRevenueVOData = []
              statRevenueVOData.push(this.statRevenueVO)
              this.data1 = statRevenueVOData
              this.getRevenueChart() // 售增明细
            } else {
              this.statRevenueVO = []
              this.statRevenueVOShow = false
            }
            // 支付方式
            if (
              res.data.data.paymentApproachList !== null &&
              res.data.data.paymentApproachList !== ''
            ) {
              let paymentData = res.data.data.paymentApproachList
              paymentData.forEach((element, index) => {
                element.payCode =
                  element.payCode === 'WEIXIN'
                    ? '微信'
                    : element.payCode === 'CASH'
                      ? '现金'
                      : element.payCode === 'ALIPAY'
                        ? '支付宝'
                        : element.payCode === 'TICKET'
                          ? '彩票'
                          : element.payCode === 'UNION'
                            ? '银联POS'
                            : element.payCode === 'TRANSFER_TO_PUBLIC_ACCOUNT'
                              ? '对公转账'
                              : element.payCode === 'INTEGRAL'
                                ? '积分'
                                : element.payCode === 'CURRENCY'
                                  ? '游戏币'
                                  : element.payCode === '合计' ? '合计' : ''
                element.color =
                  element.payCode === '微信'
                    ? '#18BE6B'
                    : element.payCode === '现金'
                      ? '#FF9901'
                      : element.payCode === '支付宝'
                        ? '#2D8CF0'
                        : element.payCode === '彩票'
                          ? '#5CADFF'
                          : element.payCode === '银联POS'
                            ? '#ED4014'
                            : element.payCode === '对公转账'
                              ? '#C42DF0'
                              : element.payCode === '积分'
                                ? '#FFC671'
                                : element.payCode === '游戏币'
                                  ? '#808695'
                                  : '#17233D'
                let revenue = element.revenue === null ? 0 : element.revenue
                element.value = revenue
                element.name = element.payCode
              })
              this.paymentApproachList = paymentData // 支付方式
            } else {
              this.paymentApproachList = [] // 支付方式
            }
            if (
              res.data.data.coinDetailList !== null &&
              res.data.data.coinDetailList !== ''
            ) {
              // 售赠明细
              this.coinDetailList = res.data.data.coinDetailList // 售赠明细
              let currencyData = []
              let totalSaleCurrency = {
                name: '总售币',
                value: 0,
                color: '#464C5B'
              } // 总售币
              let totalGiveMoney = {
                name: '总赠币',
                value: 0,
                color: '#808695'
              } // 总赠币
              let allTotal = {
                name: '总合计',
                value: 0,
                color: '#17233D'
              } // 总合计
              let electronicsCoinSell = {
                name: '电子币售币',
                value: 0,
                color: '#2D8CF0'
              } // 电子币售币
              let entityCoinSell = {
                name: '实体币售币',
                value: 0,
                color: '#FF9901'
              } // 实体币售币
              let electronicsCoinPresent = {
                name: '电子币赠币',
                value: 0,
                color: '#5CADFF'
              } // 电子币赠币
              let entityCoinPresent = {
                name: '实体币赠币',
                value: 0,
                color: '#FFC671'
              } // 实体币赠币
              let electronicsCoinTotal = {
                name: '电子币合计',
                value: 0,
                color: '#17233D'
              } // 电子币合计
              let entityCoinTotal = {
                name: '实体币合计',
                value: 0,
                color: '#17233D'
              } // 电子币合计
              this.coinDetailList.forEach((element, index) => {
                if (element.saleType === '售') {
                  totalSaleCurrency.value = element.subtotal // 小计
                  entityCoinSell.value = element.entityCoinNo // 实体币数量
                  electronicsCoinSell.value = element.electronicsCoinNo === null ? 0 : element.electronicsCoinNo // 电子币数量
                } else if (element.saleType === '赠') {
                  totalGiveMoney.value = element.subtotal
                  entityCoinPresent.value = element.entityCoinNo // 实体币数量
                  electronicsCoinPresent.value = element.electronicsCoinNo === null ? 0 : element.electronicsCoinNo // 电子币数量
                }
              })
              electronicsCoinTotal.value =
                parseInt(electronicsCoinSell.value) +
                parseInt(electronicsCoinPresent.value) // 电子币合计
              entityCoinTotal.value =
                parseInt(entityCoinSell.value) +
                parseInt(entityCoinPresent.value) // 实体币合计
              allTotal.value =
                parseInt(totalSaleCurrency.value) +
                parseInt(totalGiveMoney.value) // 总合计
              let coinDetailListData = []
              coinDetailListData.push(
                totalSaleCurrency,
                totalGiveMoney,
                allTotal
              )
              currencyData.push(
                electronicsCoinSell,
                entityCoinSell,
                electronicsCoinPresent,
                entityCoinPresent,
                electronicsCoinTotal,
                entityCoinTotal
              )
              this.currencyDataList = currencyData // 币占比
              this.coinDetailListTotal = coinDetailListData // 币总计
            } else {
              this.coinDetailList = [] // 售赠明细
            }
            // 营收渠道
            if (
              res.data.data.revenueChannelList !== null &&
              res.data.data.revenueChannelList !== ''
            ) {
              let revenueChannel = res.data.data.revenueChannelList
              revenueChannel.forEach((element, index) => {
                element.color =
                  element.channelName === '电商'
                    ? '#2D8CF0'
                    : element.channelName === '前台'
                      ? '#FF9901'
                      : element.channelName === '合计' ? '#17233D' : ''
                element.value = element.revenue === null ? 0 : element.revenue
                element.name = element.channelName
              })
              this.revenueChannelList = revenueChannel // 营收渠道
            } else {
              this.revenueChannelList = [] // 营收渠道
            }
            this.getSalesChannels() // 营收渠道
            this.getPaymentTerm() // 收款方式
            this.getCurrencyProportion() // 币占比
            this.getCurrencyAggregate() // 币总计
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${error}`)
        })
      this.contentShow = true
    },

    // 营业项明细查询
    selectItemDaily () {
      let shopId = []
      shopId.push(this.shopIds)
      itemDaily({
        merchantId: this.$store.state.user.merchantId, // 商户id
        shopIds: shopId,
        startDate: this.defaultTime ? this.defaultTime + ' 00:00:00' : '',
        endDate: this.defaultTime
          ? formatDate(
            new Date(
              new Date(this.defaultTime + ' 00:00:00').getTime() +
                  86400000 * 1
            ),
            'yyyy-MM-dd hh:mm:ss'
          )
          : ''
      })
        .then(res => {
          if (res.data.status === 200) {
            this.total = res.data.data.total
            this.resource = res.data.data.categoryItemList
          } else {
            this.$Message.error(`${res.data.error}`)
          }
        })
        .catch(error => {
          this.$Message.error(`${error}`)
        })
    },
    // 查询
    doSearch () {
      if (this.shopIds !== '') {
        if (this.turnoverButtonType) {
          this.selectItemDaily() // 营业项明细查询
        } else {
          this.getBusinessShopDaily()// 店面日营运分析统计查询
        }
      } else {
        this.contentShow = false
        this.$Message.error(`请选择门店！`)
      }
    }

    // 跳转到每日结账明细
    // dailyClosingDetails () {
    //   this.$router.push({
    //     name: 'report_finance_dailyanalytics_detail',
    //     params: { id: '123' }
    //   })
    // }
  },
  mounted () {
    this.getShopList()
  },
  created () {}
}
</script>

<style lang='less'>
.dailyanalytics-list {
  .search-item-left {
    width: 40%;
    .search-group-btn {
      width: 90px;
      height: 32px;
    }
    .mode-btn {
      .ivu-btn {
        width: 100px;
        padding: 3px 0 3px;
        .iconsys {
          margin-right: 9px;
        }
      }
      .ivu-btn:hover .iconsys {
        color: #5cadff;
      }
    }
  }
  .search-item-right {
    width: 60%;
  }
}
.dailyanalytics-title-bg {
  background: #f8f8f9;
  .chart-title-icon {
    margin-left: 40px;
  }
}
.dailyanalytics-title {
  height: 48px;
  line-height: 48px;
  width: 100%;
  .chart-title-icon {
    display: inline-block;
    width: 8px;
    height: 20px;
    background: #2d8cf0;
    vertical-align: middle;
  }
  .chart-title-name {
    display: inline-block;
    font-size: 14px;
    color: #464c5b;
    letter-spacing: 0;
    text-align: justify;
    margin-left: 10px;
    vertical-align: middle;
  }
}
.collecting-statistics {
  padding: 42px 0;
  width: 90%;
  margin: 0 auto;
}
.collecting-statistics-li {
  display: inline-block;
  width: 15%;
  text-align: center;
  .collecting-statistics-name {
    font-size: 12px;
    color: #808695;
    text-align: justify;
  }
  .collecting-statistics-num {
    font-size: 16px;
    color: #464c5b;
    text-align: justify;
    margin-top: 8px;
  }
}
.dailyanalytics-chart {
  width: 100%;
}
.dailyanalytics-chart-div {
  display: inline-block;
  width: 50%;
  position: relative;
}
.dailyanalytics-chart-li {
  position: relative;
  float: left;
  width: 33.3%;
}
.dailyanalytics-chart-legend {
  position: absolute;
  top: 10px;
  left: 45%;
  text-align: left;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 350px;
}
.chart-legend-detail {
  float: left;
  width: 100%;
}
.dailyanalytics-chart-legend-li {
  float: left;
  width: 100%;
  text-align: right;
  .legend-li {
    float: left;
    width: 50%;
  }
}
.legend-chart-li {
  width: 50%;
  margin: 0 auto;
  text-align: right;
}
.legend-li {
  width: 100%;
  margin-bottom: 27px;
  .legend-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
  }
  .legend-title {
    display: inline-block;
    width: 100px;
    font-size: 12px;
    color: #464c5b;
    margin-left: 10px;
    text-align: justify;
  }
  .legend-total {
    display: inline-block;
    width: 80px;
    font-size: 14px;
    color: #464c5b;
    letter-spacing: 0;
    text-align: justify;
  }
  .legend-percentage {
    display: inline-block;
    font-size: 12px;
    color: #808695;
    letter-spacing: 0;
    text-align: justify;
  }
}
.chart-pie {
  width: 40%;
  height: 350px;
  /* border: 1px solid red; */
}
.chart-pie1 {
  width: 60%;
  height: 350px;
  margin: 0 auto;
}
#dailyOperationAnalysis,
#turnoverDetails {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 24px;
  .ivu-tree-empty {
    text-align: center;
    padding: 10px;
  }
}
#graphicsMode {
  // width: 90%;
  // margin: 0 auto;
}
.legend-chart-div-li {
  width: 60%;
  margin: 0 auto;
}
 .select-shop-item {
    height: 35px;
    width: 210px;
    .ivu-select-selection {
      height: 35px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .ivu-tag {
      max-width: 100px;
    }
  }
  .select-shop-item .ivu-select-dropdown {
    width: 300px;
  }
  .select-shop-item .ivu-select-item {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
</style>
